<template>
  <div class="app-container">
    <div class="handle-content">
      <el-select v-model="orderStatus" style="width: 150px;margin-right: 10px;">
        <el-option label="全部订单" value="100" />
        <el-option label="超时取消" value="0" />
        <el-option label="已取消" value="1" />
        <el-option label="待付款" value="2" />
        <el-option label="待发货" value="3" />
        <el-option label="待收货" value="4" />
        <el-option label="已收货" value="5" />
        <el-option label="退款中" value="6" />
        <el-option label="已退款" value="7" />
      </el-select>
      <el-input v-if="this.$store.getters.role.store_id == 0" v-model="storeId" placeholder="请输入店铺id" style="width: 150px;margin-right: 10px;" />
      <el-input v-model="orderId" placeholder="请输入订单ID" style="width: 150px;margin-right: 10px;" />
      <el-input v-model="orderCode" placeholder="请输入订单编号" style="width: 150px;margin-right: 10px;" />
      <el-input v-model="userId" placeholder="请输入下单人ID" style="width: 150px;margin-right: 10px;" />
      <el-input v-model="acceptUser" placeholder="请输入收货人" style="width: 200px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <span class="right">
        <el-button type="primary" @click="exportExcel">
          导出
        </el-button>
      </span>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="店铺ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.store_id }}
        </template>
      </el-table-column>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="店铺名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.store.title }}
        </template>
      </el-table-column>
      <el-table-column label="订单ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center">
        <template slot-scope="scope">
          <span style="color: rgb(64, 158, 255);cursor:pointer;" @click="orderInfo(scope.row.id)">{{ scope.row.order_code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.pay_price / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="运费" align="center">
        <template slot-scope="scope">
          {{ scope.row.express_price / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="运单号" align="center">
        <template slot-scope="scope">
          {{ scope.row.express_number }}
        </template>
      </el-table-column>
      <el-table-column label="订单获取积分" align="center">
        <template slot-scope="scope">
          {{ scope.row.jf / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="订单抵扣金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.jf_price / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.order_status == 0">超时取消</span>
          <span v-else-if="scope.row.order_status == 1">已取消</span>
          <span v-else-if="scope.row.order_status == 2">待付款</span>
          <span v-else-if="scope.row.order_status == 3">待发货</span>
          <span v-else-if="scope.row.order_status == 4">待收货</span>
          <span v-else-if="scope.row.order_status == 5">已收货</span>
          <span v-else-if="scope.row.order_status == 6">退款中</span>
          <span v-else-if="scope.row.order_status == 7">已退款</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>
      <el-table-column label="收货人" align="center">
        <template slot-scope="scope">
          {{ scope.row.accepter_name }}
        </template>
      </el-table-column>
      <el-table-column label="收货人手机" align="center">
        <template slot-scope="scope">
          {{ scope.row.accepter_phone }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.pay_at }}
        </template>
      </el-table-column>
      <el-table-column label="发货时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.send_at }}
        </template>
      </el-table-column>
      <el-table-column label="收货时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.accept_at }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址(省)" align="center">
        <template slot-scope="scope">
          {{ scope.row.province_name }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址(市)" align="center">
        <template slot-scope="scope">
          {{ scope.row.city_name }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址(区/县)" align="center">
        <template slot-scope="scope">
          {{ scope.row.district_name }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址(详细地址)" align="center">
        <template slot-scope="scope">
          {{ scope.row.detail_address }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="发货" placement="top-end">
            <el-button type="primary" circle icon="el-icon-position" @click="handle(scope.row.id)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog title="订单详情" :visible.sync="showOrderInfo">
      <el-table :data="gridData">
        <el-table-column label="商品封面" align="center">
          <div slot-scope="scope">
            <img :src="scope.row.cover" style="display: inline-block; width: 80px;height:80px;border-radius: 4px;">
          </div>
        </el-table-column>
        <el-table-column property="good_title" label="商品名称" align="center" />
        <el-table-column property="pay_price" label="购买单价" align="center" />
        <el-table-column property="goods_quantity" label="购买数量" align="center" />
      </el-table>
    </el-dialog>
    <order-handle ref="orderHandle" @afterSave="afterSave" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getList } from '@/api/order'
import OrderHandle from './component/handle'
import { getToken } from '@/utils/auth' // get token from cookie

export default {

  components: { Pagination, OrderHandle },

  data() {
    return {
      showOrderInfo: false,
      gridData: [],
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        storeId: 0,
        userId: '',
        acceptUser: '',
        orderId: '',
        orderCode: '',
        orderStatus: '100',
        pageSize: 10
      },
      total: 0,
      storeId: '',
      orderId: '',
      orderCode: '',
      acceptUser: '',
      orderStatus: '100',
      userId: '',
      path: ''
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        this.path = response.data.path
      })
    },

    orderInfo(id) {
      this.showOrderInfo = true
      this.list.filter(res => {
        if (res.id === id) {
          this.gridData = res.order_items
        }
      })
    },

    handle(id) {
      this.$refs.orderHandle.handle(id)
    },

    afterSave() {
      this.getList()
    },

    search() {
      this.listQuery.storeId = this.storeId
      this.listQuery.userId = this.userId
      this.listQuery.acceptUser = this.acceptUser
      this.listQuery.orderCode = this.orderCode
      this.listQuery.orderId = this.orderId
      this.listQuery.orderStatus = this.orderStatus
      this.getList()
    },

    exportExcel() {
      const url = this.path + '?storeId=' + this.listQuery.storeId + '&userId=' + this.listQuery.userId + '&acceptUser=' + this.listQuery.acceptUser + '&orderId=' + this.listQuery.orderId + '&orderCode=' + this.listQuery.orderCode + '&orderStatus=' + this.listQuery.orderStatus + '&pageSize=' + this.listQuery.pageSize + '&page=' + this.listQuery.page + '&token=' + getToken() + '&report=' + true

      location.href = url
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        .right{
            float: right;
            margin-bottom: 20px;
        }
    }
}
</style>
